<template>
  <div class="project_box">
    <div class="left">
      <SideBar @hashchange="hash"></SideBar>
    </div>
    <div class="right">
      <template v-if="!simulation_data">
        <Loading></Loading>
      </template>
      <template v-else>
        <template v-for="item in simulation_data" :key="item.id"
          ><Project :obj="item"></Project>
        </template>
        <PageNumber
          @pageChange="fn"
          :current="current"
          :total="total"
          :limit="limit"
          :visibleNumber="visibleNumber"
        ></PageNumber>
      </template>
    </div>
  </div>
</template>
<script>
import SideBar from "../../components/Sidebar";
import Project from "../../components/Project";
import PageNumber from "../../components/PageNumber";
import { Axios } from "../../axios";
import { ref, onMounted } from "vue";
import { wash } from "../../util/wash_data";
import Loading from "../../components/loading";
export default {
  components: { SideBar, Project, Loading, PageNumber },
  setup() {
    let simulation_data = ref(null);
    let current = ref(1); //当前页数
    let total = ref(0); //数据总量
    let limit = ref(5); // 每次请求个数
    let visibleNumber = ref(5); //尺度
    let fn = async (lim) => {
      current.value = lim;
      simulation_data.value = null;
      let data = (
        await Axios({
          url: "/data/getDemo",
          method: "post",
          data: {
            page: current.value,
            number: limit.value,
            type: "2,0",
          },
        })
      ).data.data.data;
      total.value = data.count - 1;
      let render_arr = wash(data.rows);
      simulation_data.value = render_arr;
    };
    let hash = async (has) => {
      let str = "";
      for (let i = 1; i < has.length; i++) {
        str += has[i];
      }
      simulation_data.value = null;
      let data = (
        await Axios({
          url: "/data/getDemo",
          method: "post",
          data: {
            page: current.value,
            number: limit.value,
            type: "2,0",
            limits: str,
          },
        })
      ).data.data.data;
      total.value = data.count - 1;
      let render_arr = wash(data.rows);
      simulation_data.value = render_arr;
    };
    onMounted(() => {
      async function fn() {
        let data = (
          await Axios({
            url: "/data/getDemo",
            method: "post",
            data: {
              page: current.value,
              number: limit.value,
              type: "2,0",
            },
          })
        ).data.data.data;
        total.value = data.count - 1;
        let render_arr = wash(data.rows);
        simulation_data.value = render_arr;
      }
      fn();
    });
    return { simulation_data, fn, current, hash, total, limit, visibleNumber };
  },
};
</script>
<style lang="less">
@import url("../../assets/global/var.less");

.project_box {
  padding-top: 60px;
  transition: all 0.5s;

  .project_bx {
    width: 100%;
  }
  .left {
    min-width: 200px;
    .global_border_shadow ();
    float: left;
    position: fixed;

  }
  .right {
    width: 970px;
    min-height: 100vh;
    float: right;
    position: relative;
    .ImageLoader_con{
      min-height: 140px;
    }
  }
  // .article_box {
  //   width: 100%;
  // }
}
</style>